import {createStore} from 'vuex'
//引入插件 vuex-persistedstate 实现vuex数据持久化
import createPersistedState from 'vuex-persistedstate'
const config = {
    state: () => ({
        loading : false,
    }),
    getters:{
        getLoading(state,getters){
            return state.loading;
        }
    },
    mutations:{
        setLoading(state,value){
            state.loading = value;
        }
    },
    actions:{
        setLoading(context,value){
            context.commit('setLoading',value);
        }
    }
}

//用户模块
const user = {
     state: () => ({
        token: '',
        info:{
            id: '', //用户id
            nickName: '',   //当前用户名
            avatarUrl: '', //当前用户头像
            mobile: '', //手机号
            dynamicLikeList: [],    //说说点赞列表
            commentLikeList: [],    //评论点赞列表
            balances: 0,    //会员积分余额
        }
     }),

     getters: {
        //获取当前用户名
        getName(state,getters){
            return state.name;
        },
        //获取token
        getToken(state){
            return state.token || localStorage.getItem('token') || '';
        },
        //获取用户信息
        getUserInfo(state){
            return state.info;
        },
        //获取点赞列表
        getLikeList(state) {
            return state.info.dynamicLikeList;
        }
     },

     mutations: {
        //设置token值
        setToken(state,value){
            state.token = value;
            localStorage.setItem('token',value);
        },

        //删除token值
        delToken(state) {
            state.token = '';
            localStorage.removeItem('token');
        },

        //设置用户信息
        setUserInfo(state,value){
            state.info = value;
        },

        //动态点赞
        likeList(state,value){
            state.info.dynamicLikeList = value;
        }
     },

     actions: {
        //设置token值
        setToken(context,value){
            context.commit('setToken',value);
        },

        //删除token值
        delToken(context) {
            context.commit('delToken');
        },

        //设置用户信息
        setUserInfo(context,value){
            context.commit('setUserInfo',value);
        },

        //动态点赞
        likeList(context,value){
            context.commit('likeList',value);
        }
     }
}

// 说说模块
const talk = {
    state: () => ({
        talkList:[
            {
                userAvatar: '../assets/image/login.png',    //用户头像
                userName: 'admin',  //用户名
                time: '4-20-21:20', //发布时间
                content: '帅的程序员在熬夜写代码',  //文本内容
                imageBox: [
                    require('../assets/image/login.png'),
                    require('../assets/image/login.png'),
                    require('../assets/image/login.png'),
                    require('../assets/image/login.png'),
                    require('../assets/image/login.png'),
                    require('../assets/image/login.png'),
                    
                ],   //图片内容
                likeList: ['赵灵儿','李逍遥'],   //点赞列表
                liked: true,  //当前用户对此说说是否点赞
                commentList: [   //评论列表
                    {
                        avatar: '../assets/image/login.png',    //用户头像
                        name: '大哈',   //用户名
                        time: '4-27-18:26',   //评论时间
                        content: '真好看',    //评论内容
                        replyList: [    //回复列表
                            {
                                avatar: '../assets/image/login.png',    //用户头像
                                name: '甜甜',   //用户名
                                time: '4-27-18:35',   //评论时间
                                content: '我也觉得',    //评论内容
                            }
                        ],
                    }
                ],
            },
            {
                userAvatar: '../assets/image/login.png',    //用户头像
                userName: '2号程序员',  //用户名
                time: '4-20-21:19', //发布时间
                content: '苦逼程序员，摆烂......',  //文本内容
                imageBox: [
                    require('../assets/image/login.png'),
                    // require('../assets/image/login.png'),
                    // require('../assets/image/login.png'),
                    // require('../assets/image/login.png'),
                    
                ],   //图片内容
                likeList: [],   //点赞列表
                liked: true,  //当前用户对此说说是否点赞
                commentList: [   //评论列表
                    {
                        avatar: '../assets/image/login.png',    //用户头像
                        name: '二哈',   //用户名
                        time: '4-27-17:59',   //评论时间
                        content: '照片真好看',    //评论内容
                        replyList: [    //回复列表
                            {
                                avatar: '../assets/image/login.png',    //用户头像
                                name: '小甜甜',   //用户名
                                time: '4-27-18:00',   //评论时间
                                content: '英雄所见略同',    //评论内容
                            }
                        ],
                    }
                ],   
            }
        ]
    }),

    getters: {
        //获取请求的说说列表
        getTalkList(state,getters,rootState) {
            return state.talkList;
        },
        
    },

    mutations: {
        updateliked(state,payload) {
            state.talkList[payload.index].liked = !state.talkList[payload.index].liked;
            if(state.talkList[payload.index].liked){
                state.talkList[payload.index].likeList.unshift(payload.likeUser)
            }else {
                let index = state.talkList[payload.index].likeList.indexOf(payload.likeUser)
                console.log('用户位置',index)
                if(index >= 0){
                    state.talkList[payload.index].likeList.splice(index,1)
                }
            }
            console.log('mutations已执行',payload,state.talkList[payload.index].likeList);
        },
        add_talk(state,talk) {
            state.talkList.unshift(talk);
        },
        add_comment(state,comment){
            const index = comment.index;
            const newComment = comment.newComment;
            state.talkList[index].commentList.unshift(newComment);
        },
        add_reply(state,reply){
            const index = reply.index;
            const comment_index = reply.comment_index;
            const newReply = reply.newReply;
            state.talkList[index].commentList[comment_index].replyList.push(newReply);
        }
    },

    actions: {
        //点赞点击事件
        like_click(context,index) {
            context.commit('updateliked',{
                index,
                likeUser: context.getters.getName
            });
            console.log('actions已执行',index,context);
        },
        //发布说说
        add_talk(context,talk) {
            context.commit('add_talk',talk)
        },
        //增加评论
        add_comment(context,comment){
            context.commit('add_comment',comment)
        },
        //增加回复
        add_reply(context,reply){
            context.commit('add_reply',reply);
        }

    },

}

const store = createStore({
    modules: {
        talk,
        user,
        config
    },
    plugins: [
        //数据持久化
        createPersistedState({
            storage: window.localStorage,
            key: 'info',
            paths:['user.info']
        })
    ]
})


export default store;